<script setup>
import { ref, reactive, inject, computed ,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
import { isDef, cleanJsonData } from '@/core/utils/Common'
import suggestApi from '@/api/advice/SuggestApi'
import DEditor from '@/components/DEditor.vue'
const formRef = ref() // 表单ID
// const refreshPage = inject('refreshPage', () => console.error('没有提供refreshPage接口事件,请查看代码'))
const refreshData = inject('refreshData', () => console.error('没有提供refreshData接口事件,请查看代码'))

const state = reactive({
  visible: false,
  tagOptions: [{ value: 'Apples', label: 'Apples' }, { value: 'Nails', label: 'Nails' }, { value: 'Bananas', label: 'Bananas' }, { value: 'Helicopters', label: 'Helicopters' }],
  columnTreeOptions: [
    {
      value: 'System', title: '系统管理', children: [
        { value: 'Role', title: '角色管理' },
        { value: 'Module', title: '模块管理' },
        { value: 'User', title: '用户管理' }
      ]
    },
    {
      value: 'Content', title: '内容管理', children: [
        { value: 'Category', title: '分类管理' },
        { value: 'Tags', title: '标签管理' },
        { value: 'Article', title: '文章管理' }
      ]
    }
  ]
})
// 表单数据
const formState = reactive({
  id: '',
  columnId: '',
  title: '',
  thumb: [],
  author: '',
  summary: '',
  notes: '',
  idx: '',
  tags: []
})

// 初始化数据
const InitializeData = (primaryKey) => {
  if (isDef(primaryKey)){
    console.info('fectData......')
    suggestApi.getFromById(primaryKey).then(res => {
      if (res.code == 0) {
        Object.assign(formState, res.data)
        formState.columnId = formState.column.value
        formState.thumb = []
      } else {
        console.info('=========INFO===========')
      }
    })
  } else {
    console.info('新增的表单')
    cleanJsonData(formState)
    formState.tags = []
  }
  state.visible = true
}

//向父组件暴露方法和属性
defineExpose({ InitializeData })
// 重置
const onReset = () => { formRef.value.resetFields() }
// 完成
const onFinish = (values) => {
  alert(JSON.stringify(values))
  refreshData()
  state.visible = false
}
//
const filteredTags = computed(() => state.tagOptions.filter(o => !formState.tags.includes(o.value)))

console.log('vue3中的setup')

onBeforeMount(() => {
  console.log('vue3 中的生命周期 onBeforeMount')
})
// 加载选项
onMounted(() => {
  console.log('vue3 中的生命周期 onMounted ')
  // 加载标签 TODO

  // 加载栏目 TODO
})

onBeforeUpdate(() => {
  console.log('vue3 中的生命周期 onBeforeUpdate')
})

onUpdated(() => {
  console.log('vue3 中的生命周期 onUpdated')
})

onBeforeUnmount(() => {
  console.log('vue3 中的生命周期 onBeforeUnmount')
})

onUnmounted(() => {
  console.log('vue3 中的生命周期 onUnmounted')
})
// // 查看图片
// const handlePreview = (primaryKey) => {
//   alert(JSON.stringify(primaryKey))
// }
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`文章管理`"
    placement="right"
    :width="'50%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <!-- 表单内容 begin -->
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10}"
        :scroll-to-first-error="true"
        @finish="onFinish"
      >
        <a-row>
          <a-col :span="24">
            <a-form-item
              label="标题" name="title" :label-col="{span:3}"
              :rules="[{ required: true, message: '请输入标题!' }]"
            >
              <a-input
                v-model:value="formState.title" show-count :minlength="2" :maxlength="120" allow-clear
                size="large" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="作者" name="author" :label-col="{span:3}">
              <a-input v-model:value="formState.author" show-count :minlength="2" :maxlength="20" allow-clear />
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item
              label="标签" name="tags" :label-col="{span:3}"
              :rules="[{ required: true, message: '请输入标签!' }]"
            >
              <a-select
                v-model:value="formState.tags"
                mode="multiple" size="large" allow-clear
                placeholder="请输入标签!"
                :options="filteredTags"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="栏目" name="columnId"
              :rules="[{ required: true, message: '请输入栏目!' }]">
              <a-tree-select
                v-model:value="formState.columnId" :tree-default-expand-all="true" show-search allow-clear placeholder="请输入栏目!"
                :tree-data="state.columnTreeOptions" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="排序" name="idx"
              :rules="[{ required: true, message: '请输入排序'}]"
            >
              <a-input-number v-model:value="formState.idx" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="缩图" name="thumb" :label-col="{span:3}" :wrapper-col="{ span: 21}"
            >
              <a-upload
                v-model:file-list="formState.thumb"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
              >
                <div v-if="formState.thumb.length < 8">
                  <plus-outlined />
                  <div style="margin-top: 8px">上传图片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="简述" name="summary" :label-col="{span:3}" :wrapper-col="{ span: 21}"
              :rules="[{ required: true, message: '请输入summary'}]"
            >
              <a-textarea v-model:value="formState.summary" :rows="4" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}"
              :rules="[{ required: true, message: '请输入备注'}]"
            >
              <d-editor v-model:value="formState.notes" :disabled="false" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-button type="primary" html-type="submit">保存</a-button>
            <a-button @click="onReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-drawer>
</template>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>